.switch-wrapper {
    height: 16px;

    .switch {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 16px;

        input {
            opacity: 0;
        }
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(var(--bg-color-hover));
        transition: background-color 0.2s;
        border-radius: 16px;
    }

    .slider:before {
        position: absolute;
        content: '';
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 2px;
        background-color: rgb(var(--color-white));
        transition: transform 0.2s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: rgb(var(--primary-color));
    }

    input:checked + .slider:before {
        transform: translateX(12px);
    }
}
